<template>
  <div>
    <main>
      <router-view></router-view>
    </main>
    <div class="circle1"></div>
    <div class="circle2"></div>
  </div>
</template>

<script>
import Login from "views/Login";
import MainPage from "views/MainPage";

export default {
  name: "App",
  components: {
    Login,
    MainPage
  }
}
</script>

<style>
@import "~assets/css/base.css";

main {
  font-family: "Poppins", sans-serif;
  height: 100vh;
  background: linear-gradient(to right top, #ba52b9, #6cdbeb);
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle1,
.circle2 {
  background: white;
  background: linear-gradient(
      to right bottom,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.3)
  );
  height: 10rem;
  width: 10rem;
  position: absolute;
  border-radius: 50%;
}

.circle1 {
  top: 5%;
  right: 15%;
}
.circle2 {
  bottom: 5%;
  left: 10%;
}
</style>
